<template>
	<view class="content">
		<!-- #ifdef MP -->
		<view class="custom">
			<uni-nav-bar :status-bar="true" :fixed="false" color="#333333" left-icon="arrowleft" background-color="rgba(255,255,255,0)"
			 @click-left="back">
				<view class="search-box">
					<!-- mSearch组件 如果使用原样式，删除组件元素-->
					<mSearch class="mSearch-input-box" :mode="2" button="" :placeholder="defaultKeyword" @search="doSearch(false)"
					 @confirm="doSearch(false)" v-model="keyword"></mSearch>
					<!-- 原样式 如果使用原样式，恢复下方注销代码 -->
					<!-- 			
					<view class="input-box">
						<input type="text" :placeholder="defaultKeyword" @input="inputChange" v-model="keyword" @confirm="doSearch(false)"
						 placeholder-class="placeholder-class" confirm-type="search">
					</view>
					<view class="search-btn" @tap="doSearch(false)">搜索</view> 
					-->
					<!-- 原样式 end -->
				</view>
			</uni-nav-bar>
		</view>
		<!-- #endif -->

		<view class="search-keyword" @touchstart="blur">
			<scroll-view class="keyword-list-box" v-show="isShowKeywordList" scroll-y>

				<!-- <view class="keyword-entry" hover-class="keyword-entry-tap" v-for="row in keywordList" :key="row.keyword">
					<view class="keyword-text" @tap="doSearch(row.keyword)">
						<rich-text :nodes="row.htmlStr"></rich-text>
					</view>
					<view class="keyword-img" @tap="setkeyword(row)">
						<image src="/static/HM-search/back.png"></image>
					</view>
				</view> -->
				<view class="uni-padding-wrap" :style="{'top':statusBarHeight}">
					<view class="uni-form-item font28 colorfont">
						<view class="child" :class="{active:typeClass=='1'}" @click="clickItem(1)">
							综合
						</view>
						<view class="child" :class="{active:typeClass=='2'}" @click="clickItem(2)">
							价格
							<text class="square" :class="{activeSq:squareClass=='2'}" @click="clickItemSq(2)"></text>
							<text class="square2" :class="{activeSq2:squareClass=='3'}" @click="clickItemSq(3)"></text>
						</view>
						<view class="child" :class="{active:typeClass=='4'}" @click="clickItem(4)">
							销量
						</view>
						<view class="child" :class="{active:typeClass=='5'}" @click="clickItem(5)">
							店铺
						</view>
						<view class="icon" @click="chooseStatus(type)">
							<image src="../../../static/home/store/one-clo.png" mode="widthFix" v-if="type=='column'"></image>
							<image src="../../../static/home/store/two-clo.png" mode="widthFix" v-else></image>
						</view>
						<!-- <radio-group name="radio" @change="_radio">
							<label>
								<radio value="column" />竖排
							</label>
							<label>
								<radio value="row" checked />双列
							</label>
						</radio-group> -->
					</view>
				</view>
				<view :class="[type == 'column' ? 'uni-list' : 'pageList__row--wrap']">
					<view class="emity" v-if="infoList.length==0">
						暂无商品~~~
					</view>
					<block v-for="(item, index) in infoList" :key="index" v-else-if="typeClass==5">
						<view class="store-list">
							<view class="list-item">


								<view class="store-info">
									<view class="info-left">
										<image :src="item.shopLogo"></image>
									</view>
									<view class="info-right">
										<view class="info1">
											<text class="font34 colorfont">{{item.shopName}}</text>
											<!-- <image src="/static/home/store/right.png" mode="widthFix"></image> -->
											<view class="concern2" v-if="!item.isAttention" @click="joinStore(item.shopId)">
												进入店铺
											</view>
										</view>
										<view class="info2">
											<image src="/static/home/store/star.png" mode="widthFix" ></image>
											<image src="/static/home/store/star_off.png" mode="widthFix" v-for="item in rateOff" :key="item"></image>
											<text class="font20 color999" style="margin-right: 20upx;">{{item.follow}} 人关注</text>
											<!-- <text class="font20 color999">距我{{distanceStr}}km</text> -->
										</view>
									</view>
								</view>
								<view class="store-goods">
									<view class="item" v-for="(childItem,childIndex) in item.shopGoodsInfoVo" :key="childIndex" @click="clickGoods(childItem.goodsId)">
										<image :src="childItem.goodsImage" mode=""></image>
										<view class="price">
											￥{{childItem.minGoodsPrice}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>

					<block v-for="(item, index) in infoList" :key="index" v-else>
						<list-good :type="type" :data="item" :index="index" @click="clickListGood(item)" :style="{ 'width': type == 'column' ? '100%' : '48%' }">

						</list-good>
					</block>
				</view>
			</scroll-view>
			<scroll-view class="keyword-box" v-show="!isShowKeywordList" scroll-y>
				<view class="keyword-block" v-if="oldKeywordList.length>0">
					<view class="keyword-list-header">
						<view>历史搜索</view>
						<view>
							<image @tap="oldDelete" src="/static/HM-search/delete.png"></image>
						</view>
					</view>
					<view class="keyword">
						<view v-for="(keyword,index) in oldKeywordList" @tap="doSearch(keyword)" :key="index">{{keyword}}</view>
					</view>
				</view>
				<view class="keyword-block">
					<view class="keyword-list-header">
						<view>大家都在搜</view>
						<view>
							<image @tap="hotToggle" :src="'/static/HM-search/attention'+forbid+'.png'"></image>
						</view>
					</view>
					<view class="keyword" v-if="forbid==''">
						<view v-for="(keyword,index) in hotKeywordList" @tap="doSearch(keyword)" :key="index">{{keyword}}</view>
					</view>
					<view class="hide-hot-tis" v-else>
						<!-- <view>大家已隐藏</view> -->
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	//引用mSearch组件，如不需要删除即可
	import mSearch from '@/components/mehaotian-search-revision/mehaotian-search-revision.vue';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniIcon from '@/components/uni-icon/uni-icon.vue'
	import listGood from '@/components/wlp-list-good/wlp-list-good.vue';
	export default {
		components: {
			uniNavBar,
			uniIcon,
			mSearch,
			listGood
		},
		data() {
			return {
				defaultKeyword: "",
				keyword: "",
				oldKeywordList: [],
				hotKeywordList: [],
				keywordList: [],
				forbid: '',
				isShowKeywordList: false,
				statusBarHeight: 0,
				typeClass: 1, //筛选文字选中
				squareClass: 0, //三角形选中
				type: 'row',
				infoList: [],
			}
		},
		onLoad() {
			this.init();

		},
		components: {
			//引用mSearch组件，如不需要删除即可
			mSearch
		},
		methods: {
			init() {
				this.loadDefaultKeyword();
				this.loadOldKeyword();
				this.loadHotKeyword();

			},
			blur() {
				uni.hideKeyboard()
			},
			//加载默认搜索关键字
			loadDefaultKeyword() {
				//定义默认搜索关键字，可以自己实现ajax请求数据再赋值,用户未输入时，以水印方式显示在输入框，直接不输入内容搜索会搜索默认关键字
				this.defaultKeyword = "默认关键字";
			},
			//加载历史搜索,自动读取本地Storage
			loadOldKeyword() {
				uni.getStorage({
					key: 'OldKeys',
					success: (res) => {
						var OldKeys = JSON.parse(res.data);
						this.oldKeywordList = OldKeys;
					}
				});
			},
			//加载热门搜索
			loadHotKeyword() {
				//定义热门搜索关键字，可以自己实现ajax请求数据再赋值
				this.hotKeywordList = ['键盘', '鼠标', '显示器', '电脑主机', '蓝牙音箱', '笔记本电脑', '鼠标垫', 'USB', 'USB3.0'];
			},
			//监听输入
			inputChange(event) {
				//兼容引入组件时传入参数情况
				var keyword = event.detail ? event.detail.value : event;
				if (!keyword) {
					this.keywordList = [];
					this.isShowKeywordList = false;
					return;
				}
				//以下示例截取淘宝的关键字，请替换成你的接口
				uni.request({
					url: 'https://suggest.taobao.com/sug?code=utf-8&q=' + keyword, //仅为示例
					success: (res) => {
						this.keywordList = this.drawCorrelativeKeyword(res.data.result, keyword);
					}
				});
			},
			clickGoods(id){
				this.$Router.push({name:'product',params:{id:id}});
			},
			//高亮关键字
			drawCorrelativeKeyword(keywords, keyword) {
				var len = keywords.length,
					keywordArr = [];
				for (var i = 0; i < len; i++) {
					var row = keywords[i];
					//定义高亮#9f9f9f
					var html = row[0].replace(keyword, "<span style='color: #9f9f9f;'>" + keyword + "</span>");
					html = '<div>' + html + '</div>';
					var tmpObj = {
						keyword: row[0],
						htmlStr: html
					};
					keywordArr.push(tmpObj)
				}
				return keywordArr;
			},
			//顶置关键字
			setkeyword(data) {
				this.keyword = data.keyword;
			},
			// 关注店铺
			joinStore(id) {
				let that = this;
				this.$Router.push({name:'storeDetailShop',params:{shopId:id}});
			},
			//清除历史搜索
			oldDelete() {
				uni.showModal({
					content: '确定清除历史搜索记录？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.oldKeywordList = [];
							uni.removeStorage({
								key: 'OldKeys'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//热门搜索开关
			hotToggle() {
				this.forbid = this.forbid ? '' : '_forbid';
			},
			chooseStatus(e) {
				if (e === 'row') {
					this.type = 'column'
				} else {
					this.type = 'row'
				}
			},
			// 点击筛选
			clickItem(type) {
				// this.loadData();
				if (this.typeClass == type) {
					return;
				}
				this.typeClass = type;
				this.loadList(this, type);
				this.squareClass = 0;
			},
			// 点击三角形
			clickItemSq(type) {
				// this.loadData();
				if (this.squareClass == type) {
					return;
				}
				this.squareClass = type;
				this.loadList(this, type);

			},
			// 加载列表
			loadList(that, type) {
				if (type == 5) {
					that.$http.request({
							method: 'POST', // 请求方法必须大写
							url: this.$requestApi.storeList,
							data: {
								pageNumber: 1,
								pageSize: 10,
								searchParam:'我是'
							}
						})
						.then(result => {
							let _data = result.data;
							console.log(_data.result)
							if (_data.code === 200) {
								that.infoList = _data.result.dataList;
							} else if (_data.code === 2007) {
								that.infoList = []
							}
						})
				} else {
					that.$http.request({
							method: 'POST', // 请求方法必须大写
							url: this.$requestApi.goodsList,
							data: {
								shopId: 1,
								page: 1,
								size: 10,
								sortType: type
							}
						})
						.then(result => {
							let _data = result.data;
							console.log(_data.result)
							if (_data.code === 200) {
								that.infoList = _data.result.dataList;
							} else if (_data.code === 2007) {
								that.infoList = []
							}
						})
				}
			},
			back() {
				this.$Router.back(1)
			},
			// 点击单个商品
			clickListGood(item) {
				this.$Router.push({
					name: 'product',
					params: {
						id: item.id
					}
				})
			},
			//执行搜索
			doSearch(key) {
				key = key ? key : this.keyword ? this.keyword : this.defaultKeyword;
				this.keyword = key;
				this.saveKeyword(key); //保存为历史 
				this.isShowKeywordList = true;
				this.loadList(this, 1)
				//以下是示例跳转淘宝搜索，可自己实现搜索逻辑
				//#ifdef APP-PLUS
				plus.runtime.openURL(encodeURI('taobao://s.taobao.com/search?q=' + key));
				//#endif
				//#ifdef H5
				window.location.href = 'taobao://s.taobao.com/search?q=' + key
				//#endif
			},
			//保存关键字到历史记录
			saveKeyword(keyword) {
				uni.getStorage({
					key: 'OldKeys',
					success: (res) => {
						console.log(res.data);
						var OldKeys = JSON.parse(res.data);
						var findIndex = OldKeys.indexOf(keyword);
						if (findIndex == -1) {
							OldKeys.unshift(keyword);
						} else {
							OldKeys.splice(findIndex, 1);
							OldKeys.unshift(keyword);
						}
						//最多10个纪录
						OldKeys.length > 10 && OldKeys.pop();
						uni.setStorage({
							key: 'OldKeys',
							data: JSON.stringify(OldKeys)
						});
						this.oldKeywordList = OldKeys; //更新历史搜索
					},
					fail: (e) => {
						var OldKeys = [keyword];
						uni.setStorage({
							key: 'OldKeys',
							data: JSON.stringify(OldKeys)
						});
						this.oldKeywordList = OldKeys; //更新历史搜索
					}
				});
			}
		}
	}
</script>
<style lang="scss">
	@import '@/style/mixin/triangle.scss';

	view {
		display: block;
	}

	.search-box {
		width: 70%;
		padding: 15upx 2.5%;
		display: flex;
		justify-content: space-between;
	}

	.search-box .mSearch-input-box {
		width: 100%;
	}

	.search-box .input-box {
		width: 85%;
		flex-shrink: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-box .search-btn {
		width: 15%;
		margin: 0 0 0 2%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		font-size: 28upx;
		color: #fff;
		background: linear-gradient(to right, #ff9801, #ff570a);
		border-radius: 60upx;
	}

	.search-box .input-box>input {
		width: 100%;
		height: 60upx;
		font-size: 32upx;
		border: 0;
		border-radius: 60upx;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding: 0 3%;
		margin: 0;
		background-color: #ffffff;
	}

	.placeholder-class {
		color: #9e9e9e;
	}

	.search-keyword {
		width: 100%;
		background-color: rgb(242, 242, 242);
	}

	.keyword-list-box {
		height: calc(100vh - 110upx);
		border-radius: 20upx 20upx 0 0;
		background-color: #fff;
	}

	.keyword-entry-tap {
		background-color: #eee;
	}

	.keyword-entry {
		width: 94%;
		height: 80upx;
		margin: 0 3%;
		font-size: 30upx;
		color: #333;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: solid 1upx #e7e7e7;
	}

	.keyword-entry image {
		width: 60upx;
		height: 60upx;
	}

	.keyword-entry .keyword-text,
	.keyword-entry .keyword-img {
		height: 80upx;
		display: flex;
		align-items: center;
	}

	.keyword-entry .keyword-text {
		width: 90%;
	}

	.keyword-entry .keyword-img {
		width: 10%;
		justify-content: center;
	}

	.keyword-box {
		height: calc(100vh - 110upx);
		border-radius: 20upx 20upx 0 0;
		background-color: #fff;
	}

	.keyword-box .keyword-block {
		padding: 10upx 0;
	}

	.keyword-box .keyword-block .keyword-list-header {
		width: 94%;
		padding: 10upx 3%;
		font-size: 27upx;
		color: #333;
		display: flex;
		justify-content: space-between;
	}

	.keyword-box .keyword-block .keyword-list-header image {
		width: 40upx;
		height: 40upx;
	}

	.keyword-box .keyword-block .keyword {
		width: 94%;
		padding: 3px 3%;
		display: flex;
		flex-flow: wrap;
		justify-content: flex-start;
	}

	.keyword-box .keyword-block .hide-hot-tis {
		display: flex;
		justify-content: center;
		font-size: 28upx;
		color: #6b6b6b;
	}

	.keyword-box .keyword-block .keyword>view {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 60upx;
		padding: 0 35upx;
		margin: 10upx 30upx 30upx 0;
		height: 60upx;
		font-size: 30upx;
		background-color: rgba(245, 245, 250, 1);
		color: #8E8E93;
	}

	.input-placeholder {
		color: #D1D1D6;
	}

	.emity {
		text-align: center;
		font-size: 24rpx;
		color: #999;
		width: 100%;
		margin-top: 200upx;
	}

	.pageList__row--wrap {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;
		justify-content: space-between;
	}

	.uni-padding-wrap {
		background-color: #fff;
		box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04);
		margin: 30upx auto 50upx auto;
		border-radius: 0 0 10upx 10upx;
		position: sticky;
		background-color: #fff;
		z-index: 9;
		width: 100%;
	}

	.uni-padding-wrap::before {
		content: '';
		position: absolute;
		top: 0;
		background: rgba(0, 0, 0, 0.05);
		left: 30upx;
		right: 0;
		height: 1upx;
	}

	.uni-form-item {
		justify-content: space-between;
		align-items: center;
		padding: 20upx 0;

		.child {
			position: relative;

			.square {
				position: absolute;
				top: -2upx;
				margin-left: 4upx;
				@include triangle(10upx, top, #D1D1D6);
			}

			.square2 {
				position: absolute;
				margin-left: 4upx;
				top: 24upx;
				@include triangle(10upx, bottom, #D1D1D6);
			}

			.activeSq {
				@include triangle(10upx, top, #222);
			}

			.activeSq2 {
				@include triangle(10upx, bottom, #222);
			}
		}

		.active {
			color: #FF5E00;
		}
	}

	.uni-form-item .icon {
		position: relative;
		top: 6upx;
	}

	.uni-form-item .icon image {
		width: 40upx;
		height: auto;
	}

	.uni-list:before {
		height: 0;
	}

	.box-content {
		position: relative;
		top: -10upx;
	}

	.list-item {
		margin-bottom: 30upx;
		-webkit-box-shadow: 0px 10upx 30upx rgba(0, 0, 0, 0.04);
		box-shadow: 0px 10upx 30upx rgba(0, 0, 0, 0.04);
		margin-bottom: 30upx;
		border-radius: 20upx;

		.store-info {
			position: relative;
			display: flex;
			justify-content: space-between;

			.info-left {
				width: 100upx;
				height: 100upx;
				border-radius: 10upx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10upx;
				}
			}

			.info-right {
				width: 560upx;
				height: 100upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20upx;

				.info1 {
					display: flex;
					align-items: center;
					position: relative;

					image {
						width: 16upx;
						height: auto;
						margin-left: 20upx;
						margin-top: 4upx;
					}
				}

				.concern {
					display: inline-block;
					border-radius: 50upx;
					padding: 7upx 14upx;
					border: 1px solid rgba(11, 14, 17, 1);
					color: #0B0E11;
					font-size: 24upx;
					position: absolute;
					right: 0;
				}

				.concern2 {
					display: inline-block;
					border-radius: 50upx;
					padding: 7upx 14upx;
					background: linear-gradient(90deg, rgba(255, 94, 0, 1) 0%, rgba(255, 35, 0, 1) 100%);
					color: #fff;
					font-size: 24upx;
					position: absolute;
					right: 0;
				}
			}

		}

		.store-goods {
			margin-top: 30upx;
			position: relative;
			display: flex;
			justify-content: space-between;

			.item {
				width: 180upx;
				height: 180upx;
				border-radius: 20upx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					border-radius: 20upx;
				}

				.price {
					position: absolute;
					bottom: 0;
					left: 0;
					border-radius: 0 20upx 0 20upx;
					height: 40upx;
					padding: 0 20upx;
					line-height: 40upx;
					font-size: 24upx;
					color: #fff;
					background: rgba(11, 14, 17, 0.6);
					border-radius: 0px 20px 0px 20px;
				}
			}
		}
	}

	.info2 {
		display: flex;
		align-items: center;
	}

	.info2 image {
		width: 20upx;
		height: auto;
		margin-right: 14upx;
	}
</style>
